<template>
  <div>
    <div class="page-header">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="page-header__title">{{$t('pages.help.page_title')}}</div>
        </el-col>
        <el-col :span="16" class="text-right">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input @keydown.native.13="getDataList" :placeholder="$t('pages.help.input_search_placeholder')" v-model="keyword">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>

            <el-button type="danger"  @click="getDataList()">搜索</el-button>

            <el-button type="primary" icon="el-icon-plus"  @click="addOrUpdateHandle()">{{$t('common.new')}}</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <el-card class="table-container">
      <el-table :data="dataList">
        <el-table-column prop="id" label="ID">
        </el-table-column>

        <el-table-column prop="name" :label="$t('pages.help.col_title')">
        </el-table-column>

        <el-table-column prop="createUser" :label="$t('pages.help.col_publisher')">
        </el-table-column>

        <el-table-column
          class-name="action text-center"
          label-class-name="text-center"
          prop="createTime"
          :label="$t('pages.help.col_date')">
        </el-table-column>

        <el-table-column
          prop="operate"
          class-name="action text-center"
          label-class-name="text-center"
          :label="$t('pages.help.col_opetate')" width="180">
          <template slot-scope="scope">
            <a href="/" class="text-warning" @click.prevent="addOrUpdateHandle(scope.row)">{{$t('pages.help.edit')}}</a>
            <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('pages.help.detail')}}</a>
            <a href="/" class="text-danger"  @click.prevent="deleteHandle(scope.row.id)">{{$t('pages.help.del')}}</a>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </el-card>

    <el-dialog :title="action === 'view' ? '查看问题详情 ': (!current.id ? $t('pages.help.new') : $t('pages.help.edit'))"
               :close-on-click-modal="false"
               :visible.sync="visible"
               @close="onClose">
      <el-form :validate-on-rule-change="false"
               @keyup.enter.native.prevent="ok"
               :rules="action === 'view'? {}:dataRule"
               :model="current" label-width="80px" ref="dataForm">
        <el-form-item :label="$t('pages.help.col_title')" prop="name">
          <el-input :placeholder="$t('pages.help.col_title')" v-model="current.name" :disabled="action === 'view'" />
        </el-form-item>

        <el-form-item :label="$t('pages.help.question_detail')" prop="content">
          <!-- :placeholder="$t('pages.help.question_detail')" -->
          <ueditor
          @input="modleMsg"
          v-model="current.content"></ueditor>
        </el-form-item>
      </el-form>
      <span slot="footer" v-if="action != 'view'" class="dialog-footer">
        <el-button type="primary" @click.prevent="ok">{{$t('pages.help.ok')}}</el-button>
        <el-button type="danger" @click="visible = false">{{$t('pages.help.cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from '@/utils/axios'
  import ueditor from '@/components/ueditor'
  export default {
    data () {
      return {
        // 搜索条件
        keyword: '',
        // 执行的动作
        action: '',
        // 当前选择的
        current: {
          name:'',
          content: ''
        },
        dialogData: null,
        // 控制表单的显示隐藏
        visible: false,
        // 添加/修改数据规则
        dataRule: {
          name: [
            { required: true, message: '标题不能为空', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '问题详情不能为空', trigger: 'blur' }
          ]
        },

        searchInput: '',
        dataList: [],
        currentPage: 1,
        pageSize: 10,
        totalPage: 1,
        dataListLoading: false,
        addOrUpdateVisible: false,
        viewDetailVisible: false
      }
    },
    // components: {
    //   AddOrUpdate,
    //   ViewDetail
    // },
    created() {
    const {query} = this.$route
     this.currentPage = query.pageNo ? parseInt(query.pageNo) : 1
     this.keyword = query.name ? query.name : ''
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {

        this.dataListLoading = true
        let jsonData = {
          'pageNo': this.currentPage - 1,
          'pageSize': this.pageSize,
          'name': this.keyword
        }
        this.$router.push({
          path: 'sys-manage-help',
          query: Object.assign({}, jsonData, {pageNo: this.pageIndex})
        })
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-help/product/cpqsystemhelp/querySysHelpEntityList'),
          method: 'post',
          data: this.$http.adornParams(jsonData)
        }).then((data) => {
          /* if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          } */
          let {page:{list,totalCount}} = data
          this.dataList = list
          this.totalPage = totalCount
          this.dataListLoading = false
        })
      },

      handleCurrentChange (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle (rowData) {
        this.visible = true
        this.action = rowData ? 'edit' : 'addNes'
        this.dialogData = {...rowData}
        this.current = {...rowData}
        /* if(rowData) {
          this.current.name = rowData.name
          this.current.content = rowData.content
        } */

      },

      // 点击搜索
      search () {
        this.currentPage = 1
        this.getDataList()
      },

      //  弹窗关闭清除上次的校验结果
      onClose () {
        this.$refs['dataForm'].clearValidate()
      },
      // 查看
      viewDetailHandle (rowData) {
        this.visible = true
        this.action = 'view'
        this.current = rowData
      },

      // 点击确认
      ok () {
        // 编辑操作

        if (this.action === 'edit') {
          return this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              this.$http({
                url: this.$http.adornUrl("/prm-os-srv-help/product/cpqsystemhelp/updateSysHelpEntity"),
                method: 'post',
                data: this.$http.adornData({
                  'id': this.dialogData.id,
                  'name': this.current.name,
                  'content': this.current.content
                })
              }).then(({data}) => {

                this.visible = false
                this.getDataList()
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })

              })
            }
          })
        }
        if(this.action === 'addNes') {
           this.$refs['dataForm'].validate((valid) => {
            if(valid) {
              console.log(valid)
              this.$http({
                url: this.$http.adornUrl("/prm-os-srv-help/product/cpqsystemhelp/saveSysHelpEntity"),
                method: 'post',
                data: this.$http.adornData({
                  'name': this.current.name,
                  'content': this.current.content
                })
              }).then( data => {
                  this.$message({
                  type: 'successs',
                  message: '新增成功'
                })
                this.visible = false
                this.getDataList()
              })


            }

          })

        }
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定删除该笔数据吗?`, '提示', {
            // confirmButtonText: '确定',
            // cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            return this.$http({
              url: this.$http.adornUrl('/prm-os-srv-help/product/cpqsystemhelp/deleteSysHelpEntityById'),
              method: 'post',
              data: this.$http.adornData({
                'id': id
              })
            })
          })
          .then(({data}) => {
            this.visible = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
            })
            this.getDataList()

          })
          .catch(() => {})
      },


      modleMsg(data) {
        console.log(data)
        setTimeout(()=>{
        this.$refs.dataForm.validateField('content')

        },200)
      },
    },
    components: {
      ueditor,
    }
  }
</script>

<style scoped>
  .el-input.is-disabled >>> .el-input__inner,
  .el-textarea.is-disabled >>> .el-textarea__inner{
    background-color: transparent;
    cursor: default;
  }
</style>
<style lang="scss" scoped>



</style>
